import React,{Component} from "react"
import axios from 'axios'
import {Link} from "react-router-dom";
import {getCourseList,getRankDetail,deleteRank,updataRank} from "../../api/course"
import $ from "jquery"
import './index.css'
import deleteImg from "../../images/delete.png"
import addImg from "../../images/add.png"
import loadingImg from "../../images/loading.gif"
import backImg from "../../images/back.png"
// import AppDB from 'https://game.jixiucloud.cn/lib/jxconsoledb.min.js?id=17'
import AppDB from "../../api/appdb.js";
class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
           ranksdata:{
            coursetutor:'',
            imgurl:'',
            weibo:'',
            platcount:'',
            watchcount:'', 
            readcount:'',
            heatcount:'',
           },
           ranks:[],
           number:1,
           detelebtn:false,
           submitbtn:false,
           savebtn:false,
           pageloading:false,
           courselink:false
        }
    }
    componentDidMount(){
        let that = this
        let isLoginCon = that.props.userinfo && that.props.userinfo.AccessToken
        // if(!isLoginCon){
        //    that.setState({isLoginCon:true})
        //    return
        // }
        that.setState({pageloading:true})
        if(that.props.match.params.id == 'add'){
           that.setState({submitbtn:true,pageloading:false})
        }else if(that.props.match.params.id == ''){
            that.props.history.push(this.state.courselink?'./rankadmin/add':'/fanscourse/rankadmin/add')
        }else{
            that.setState({detelebtn:true,savebtn:true})
            getRankDetail(that.props.match.params.id,'rank').then(res=>{
                let data= JSON.parse(res.data.data.data)[0] || JSON.parse(res.data.data.data)[0].data
                let rank = that.state.ranksdata
                    rank.coursetutor = data.coursetutor
                    rank.imgurl = data.imgurl
                    rank.weibo = data.weibo
                    rank.platcount = data.platcount
                    rank.watchcount = data.watchcount
                    rank.readcount = data.readcount
                    rank.heatcount = data.heatcount
                that.setState({
                    ranksdata:rank,
                    pageloading:false
                })
            }).catch((err)=>{
                that.setState({submitbtn:true,detelebtn:false,savebtn:false,pageloading:false})
            })
              
         }
        // that.getdata()
    }
    onInputchange(index,name,e){
        let data = this.state.ranksdata;
        if(name == 'coursetutor'){
            data.coursetutor = e.target.value;
            this.setState({coursetutor:data});
        }else if(name == 'weibo'){
            data.weibo = e.target.value;
            this.setState({weibo:data});
        }else if(name == 'playcount'){
            data.platcount = e.target.value;
            this.setState({platcount:data});
        }else if(name == 'watchcount'){
            data.watchcount = e.target.value;
            this.setState({watchcount:data});
        }else if(name == 'readcount'){
            data.readcount = e.target.value;
            this.setState({readcount:data});
        }else if(name == 'heatcount'){
            data.heatcount = e.target.value;
            this.setState({heatcount:data});
        }
        let play= this.state.ranksdata.platcount *0.1
        let share= this.state.ranksdata.watchcount*100
       
        if(data.platcount&&data.watchcount&&data.readcount){
            data.heatcount =  parseInt(play) +  parseInt(share) + parseInt(this.state.ranksdata.readcount);
            this.setState({heatcount:data});   
        }else{
            data.heatcount= ''
            this.setState({heatcount:data}); 
        }
        
         console.log(this.state.ranksdata.platcount *0.1,'播放指数')
         console.log(this.state.ranksdata.watchcount*100,'分享指数')
         console.log(this.state.ranksdata.readcount,'阅读指数')
         console.log(this.state.ranksdata.heatcount,'热度指数')
    }
    addvideo(){
        this.setState({number:++this.state.number});
        let value = {id:this.state.number,title:'',videotitle:'视频标题'+this.state.number ,linktitle:'视频地址'+this.state.number,link:''}
        this.state.coursedata.addItemList.push(value)
        this.setState({addItemList:this.state.coursedata.addItemList});
    }
    deleteItem(index){
        if(this.state.coursedata.addItemList.length<=1){
            alert('至少需要添加一个视频')
            return
        }
        let data = this.state.coursedata
            this.state.coursedata.addItemList.splice(index,1)
            data.addItemList= this.state.coursedata.addItemList
        this.setState({
            addItemList:data
        })
       
    }
    getdata(){
        let that = this
        getCourseList(0,99).then((data)=>{
            that.setState({coursetitles:data.data,pageloading:false})
        })
    }
    handleChangetitle= e => {
        if(!e.target.selectedIndex){
            let data = this.state.coursedata;
            data.courseid = ''
            this.setState({courseid:data});
            return
        }
        let data = this.state.coursedata;
            data.coursetitle = this.state.coursetitles[e.target.selectedIndex-1].Title;
            data.courseid = this.state.coursetitles[e.target.selectedIndex-1].PostId;
           
        this.setState({courseid:data,coursetitle:data});
    }
    load(ele){
        let that = this
        var form = new FormData();
        var file = ele.target.files[0];
        form.append('value', file);
        if(!file){return}
        var settings = {
            "url": `${window.AppOptions.Server}/api/file/UploadImage`,
            "method": "POST",
            "processData": false,
            "mimeType": "multipart/form-data",
            "contentType": false,
            "data": form
        };

        $.ajax(settings).done(function (response) {
            //that.postModel.avatar = JSON.parse(response).data;
            let data = that.state.ranksdata
                data.imgurl = JSON.parse(response).data
            that.setState({imgurl:data.imgurl})
        });



        // this.refs.loading.style.display="block"
        // let file=this.refs.file
        // console.log(file.files[0])
        // let forData=new FormData
        // forData.append('headfile',file.files[0])
        // var url="http://vueshop.glbuys.com/api/user/myinfo/formdatahead?token=1ec949a15fb709370f"
        // axios({
        //      method:"post",
        //      url:url,
        //      data:forData
        // }).then(res=>{
        // this.refs.loading.style.display="none"
             
        //      console.log(res.data)
        //      if(res.data.code==200)
        //      {
        //           let temp="//vueshop.glbuys.com/userfiles/head/"
        //           this.setState({
        //                 imgurl:temp+res.data.data.msbox
        //           })
        //      }
        // })
    }
    save(name){
        let that =this;
        let tutor = that.state.ranksdata.coursetutor
        let imgurl = that.state.ranksdata.imgurl
        let weibo = that.state.ranksdata.weibo
        let heatcount = that.state.ranksdata.heatcount
       if(!tutor){
            alert('导师名称不能为空')
            return
        }else if(!imgurl){
            alert('头像不能为空')
            return
        }else if(!weibo){
            alert('微博id不能为空')
            return
        }else if(!heatcount){
            alert('热度数据不能为空')
            return
        }
        if(name == 'save'){
            let id = that.props.match.params.id
            let data= JSON.stringify(that.state.ranksdata)
            updataRank(id,data,'rank').then(res=>{
                that.props.history.push(this.state.courselink?'/ranklist':'/fanscourse/ranklist')
            })
        }else if(name == 'submit'){
            window.AppDB.Post(
                'rank',
                JSON.stringify(that.state.ranksdata),
            ).then(x => {
                that.props.history.push(this.state.courselink?'/ranklist':'/fanscourse/ranklist')
            });
        }
       

       
    }
    detele(){
        let that = this
        let id = that.props.match.params.id
        deleteRank(id).then(item=>{
            that.props.history.push(this.state.courselink?'/ranklist':'/fanscourse/ranklist')
        })
    }
    back(){
        this.props.history.push('/fanscourse/ranklist')
    }
	render(){
        let {coursetutor,weibo,platcount,watchcount,readcount,heatcount,imgurl} = this.state.ranksdata
		return(
           <div className="course">
               <div className='header'>
                   <div className='back' onClick={this.back.bind(this)}><img src={backImg}/></div>
                   <div className='title'>排行数据</div>
               </div>
              <div className='coursecon'>
                  <div className='label'>导师名称</div>
                  <div className='input'>
                      <input type='text' maxLength='14' value={coursetutor} onChange={this.onInputchange.bind(this,'','coursetutor')} placeholder='显示名称'/>
                  </div>
              </div>
              <div className='coursecon'>
                    <div className='label'>老师头像</div>
                    <div className="userImg">
                        <input type="file" ref="file" id='uploadImage' onChange={this.load.bind(this)}/>
                        {imgurl?<img src={imgurl}/>:<div className='upload'></div>}
                    </div>
              </div>
              <div className='coursecon'>
                  <div className='label'>微博账号</div>
                  <div className='input'>
                      @<input type='text' value={weibo} onChange={this.onInputchange.bind(this,'','weibo')} placeholder='微博账号'/>
                  </div>
              </div>
              <div className='coursecon'>
                  <div className='label'>播放量</div>
                  <div className='input'>
                      <input type='number' value={platcount} onChange={this.onInputchange.bind(this,'','playcount')} placeholder='总播放量'/>
                  </div>
                  
              </div>
              <div className='tip'>*播放指数=播放量×0.1</div>

              <div className='coursecon'>
                  <div className='label'>在看量</div>
                  <div className='input'>
                      <input type='number' value={watchcount} onChange={this.onInputchange.bind(this,'','watchcount')} placeholder='微信公众号总"在看"数'/>
                  </div>
                 
              </div>
              <div className='tip'>*分享指数="在看"数×100</div>

              <div className='coursecon'>
                  <div className='label'>阅读量</div>
                  <div className='input'>
                      <input type='number' value={readcount} onChange={this.onInputchange.bind(this,'','readcount')} placeholder='微信公众号总阅读量'/>
                  </div>
                 
              </div>
              <div className='tip'>*阅读指数=阅读量</div>

              <div className='coursecon'>
                  <div className='label'>总热度</div>
                  <div className='input'>
                      <input type='number' readOnly='readonly' value={heatcount} onChange={this.onInputchange.bind(this,'','heatcount')} placeholder='自动计算'/>
                  </div>
                  
              </div>
              <div className='tip'>*总热度=播放指数+分享指数+阅读指数</div>
              {this.state.submitbtn?<div className='save' onClick={this.save.bind(this,'submit')}>创建</div>:''}
              {this.state.savebtn?<div className='save' onClick={this.save.bind(this,'save')}>保存</div>:''}
              {this.state.detelebtn?<div className='detele qx' onClick={this.detele.bind(this)}>删除</div>:''}
              <Link className='qx' to="./fanscourse/ranklist">取消</Link>
              {this.state.pageloading?<div className='popuploading' >
                   <div className='loading'><img src={loadingImg}/></div>
               </div>:''}
           </div>
		)
	}
}
 

export default Index